<template>
	<view v-if="show" class="share-modal-overlay" @click="closeModal">
		<view class="share-modal" @click.stop>
			<!-- 头部 -->
			<view class="modal-header">
				<text class="modal-title">分享比赛</text>
				<view class="close-btn" @click="closeModal">
					<uni-icons type="close" size="20" color="#666"></uni-icons>
				</view>
			</view>
			
			<!-- 分享预览 -->
			<view class="share-preview">
				<view class="preview-card">
					<view class="preview-header">
						<text class="preview-title">{{ shareData.title }}</text>
						<view class="preview-status" :class="'status-' + matchData.status">
							{{ getStatusText(matchData.status) }}
						</view>
					</view>
					<view class="preview-info">
						<text class="preview-desc">{{ shareData.desc }}</text>
					</view>
				</view>
			</view>
			
			<!-- 分享文案编辑 -->
			<view class="share-text-section">
				<text class="section-title">分享文案</text>
				<textarea 
					class="share-textarea" 
					v-model="customShareText"
					placeholder="添加你的分享文案..."
					maxlength="200"
				></textarea>
				<view class="text-count">{{ customShareText.length }}/200</view>
			</view>
			
			<!-- 分享选项 -->
			<view class="share-options">
				<text class="section-title">分享到</text>
				<view class="options-grid">
					<!-- 微信好友分享 - 使用 button 组件的 open-type="share" -->
					<button 
						class="option-item share-button" 
						open-type="share"
						@click="onShareClick"
					>
						<view class="option-icon wechat">
							<uni-icons type="weixin" size="24" color="#fff"></uni-icons>
						</view>
						<text class="option-text">微信好友</text>
					</button>
					
					<view class="option-item" @click="shareToMoments">
						<view class="option-icon moments">
							<uni-icons type="pyq" size="24" color="#fff"></uni-icons>
						</view>
						<text class="option-text">朋友圈</text>
					</view>
					
					<view class="option-item" @click="copyLink">
						<view class="option-icon copy">
							<uni-icons type="copy" size="24" color="#fff"></uni-icons>
						</view>
						<text class="option-text">复制链接</text>
					</view>
					
					<view class="option-item" @click="shareToSystem">
						<view class="option-icon system">
							<uni-icons type="share" size="24" color="#fff"></uni-icons>
						</view>
						<text class="option-text">更多</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ShareModal',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		matchData: {
			type: Object,
			default: () => ({})
		}
	},
	
	data() {
		return {
			customShareText: ''
		}
	},
	
	computed: {
		shareData() {
			if (!this.matchData) return {}
			
			return {
				title: this.matchData.title || '比赛分享',
				desc: this.generateShareDesc(),
				link: this.generateShareLink(),
				imageUrl: this.matchData.poster || ''
			}
		}
	},
	
	watch: {
		show(newVal) {
			if (newVal) {
				this.initShareText()
			}
		}
	},
	
	methods: {
		// 初始化分享文案
		initShareText() {
			const templates = [
				`发现一场不错的比赛「${this.matchData.title}」，有兴趣的朋友可以关注！`,
				`「${this.matchData.title}」正在招募裁判，时间${this.formatDate(this.matchData.start_date)}，地点${this.matchData.location}`,
				`分享一场即将举行的比赛：${this.matchData.title}，诚邀大家加入！`
			]
			
			// 根据用户角色选择不同的默认文案
			const userInfo = this.getCurrentUserInfo()
			const isOrganizer = userInfo && userInfo._id === this.matchData.publisher_id
			
			if (isOrganizer) {
				this.customShareText = `我发布了一场比赛「${this.matchData.title}」，诚邀优秀裁判加入！`
			} else {
				this.customShareText = templates[Math.floor(Math.random() * templates.length)]
			}
		},
		
		// 生成分享描述
		generateShareDesc() {
			const parts = []
			
			if (this.matchData.start_date) {
				parts.push(`时间：${this.formatDate(this.matchData.start_date)}`)
			}
			if (this.matchData.location) {
				parts.push(`地点：${this.matchData.location}`)
			}
			if (this.matchData.level) {
				parts.push(`级别：${this.matchData.level}`)
			}
			
			return parts.join(' | ')
		},
		
		// 生成分享链接
		generateShareLink() {
			const matchId = this.matchData._id || this.matchData.id
			return `/packgeCompetition/competition/share-preview?id=${matchId}&from=share`
		},
		
		// 处理微信好友分享点击事件
		onShareClick() {
			// 设置分享数据给父页面
			const shareContent = {
				title: this.customShareText || this.shareData.title,
				path: this.shareData.link,
				imageUrl: this.shareData.imageUrl
			}
			
			// 通知父页面更新分享配置
			this.$emit('triggerShare', {
				type: 'weixin',
				content: shareContent
			})
			
			// 关闭分享弹窗
			this.closeModal()
		},
		
		// 分享到朋友圈
		shareToMoments() {
			// 微信小程序不支持直接分享到朋友圈
			uni.showModal({
				title: '分享提示',
				content: '小程序暂不支持直接分享到朋友圈，您可以分享给微信好友后，再转发到朋友圈',
				showCancel: false,
				confirmText: '知道了'
			})
		},
		
		// 复制链接
		copyLink() {
			const fullLink = this.generateFullLink()
			
			uni.setClipboardData({
				data: fullLink,
				success: () => {
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					})
					this.closeModal()
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					})
				}
			})
		},
		
		// 分享到系统
		shareToSystem() {
			// 在小程序环境中，使用复制链接作为备用方案
			this.copyLink()
		},
		

		
		// 生成完整链接
		generateFullLink() {
			const baseUrl = 'https://yourapp.com' // 替换为实际的小程序链接
			return `${baseUrl}${this.shareData.link}`
		},
		
		// 分享成功回调
		onShareSuccess(platform) {
			uni.showToast({
				title: `分享到${platform}成功`,
				icon: 'success'
			})
			this.closeModal()
			this.$emit('shareSuccess', { platform, matchData: this.matchData })
		},
		
		// 分享失败回调
		onShareFail(platform, error) {
			console.error(`分享到${platform}失败:`, error)
			uni.showToast({
				title: `分享失败，请重试`,
				icon: 'none'
			})
		},
		
		// 关闭弹窗
		closeModal() {
			this.$emit('close')
		},
		
		// 获取当前用户信息
		getCurrentUserInfo() {
			const userInfoStr = uni.getStorageSync('userInfo')
			if (!userInfoStr) return null
			
			try {
				return typeof userInfoStr === 'string' ? JSON.parse(userInfoStr) : userInfoStr
			} catch (error) {
				console.error('解析用户信息失败:', error)
				return null
			}
		},
		
		// 格式化日期
		formatDate(dateString) {
			if (!dateString) return ''
			const date = new Date(dateString)
			return `${date.getMonth() + 1}月${date.getDate()}日`
		},
		
		// 获取状态文本
		getStatusText(status) {
			const statusMap = {
				draft: '草稿',
				published: '已发布',
				in_progress: '进行中',
				completed: '已完成',
				cancelled: '已取消'
			}
			return statusMap[status] || status
		}
	}
}
</script>

<style lang="scss" scoped>
.share-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.share-modal {
	width: 100%;
	max-width: 750rpx;
	background: white;
	border-radius: 24rpx 24rpx 0 0;
	max-height: 80vh;
	overflow: hidden;
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.modal-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f5f5;
	border-radius: 50%;
}

.share-preview {
	padding: 30rpx;
	background: #f8f9fa;
}

.preview-card {
	background: white;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.preview-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12rpx;
}

.preview-title {
	flex: 1;
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	line-height: 1.4;
}

.preview-status {
	padding: 6rpx 12rpx;
	border-radius: 16rpx;
	font-size: 20rpx;
	color: #fff;
	margin-left: 16rpx;
	
	&.status-draft {
		background-color: #999;
	}
	
	&.status-published {
		background-color: #1BAE76;
	}
	
	&.status-in_progress {
		background-color: #ff9500;
	}
	
	&.status-completed {
		background-color: #007aff;
	}
	
	&.status-cancelled {
		background-color: #ff3b30;
	}
}

.preview-info {
	border-top: 2rpx solid #f0f0f0;
	padding-top: 12rpx;
}

.preview-desc {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

.share-text-section {
	padding: 30rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.share-textarea {
	width: 100%;
	min-height: 120rpx;
	max-height: 200rpx;
	padding: 20rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	font-size: 26rpx;
	line-height: 1.5;
	background: #f8f9fa;
	box-sizing: border-box;
	resize: none;
	
	&:focus {
		border-color: #1BAE76;
		background: white;
	}
}

.text-count {
	text-align: right;
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #999;
}

.share-options {
	padding: 30rpx;
}

.options-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
}

.option-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 20rpx 0;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.95);
	}
}

.option-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&.wechat {
		background: linear-gradient(135deg, #1aad19 0%, #00c800 100%);
	}
	
	&.moments {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
	}
	
	&.copy {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.system {
		background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
	}
}

.option-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}

/* 分享按钮特殊样式 */
.share-button {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	width: 100%;
	font-size: inherit;
	line-height: inherit;
	
	&::after {
		border: none;
	}
	
	.option-text {
		color: #333;
	}
}
</style> 